﻿@page "/AutoComplete/Forms-Validation"

@using Syncfusion.Blazor.DropDowns;
@using Syncfusion.Blazor.Buttons;
@using System.ComponentModel.DataAnnotations;

@inherits SampleBaseComponent;


<SampleDescription>
    <p>This sample is used to validate form using the Data Annotation. Type the value in the input element. If the input value is valid, then the given input will be ready to submit. Otherwise, an error message will be shown until you enter the valid value.</p>
</SampleDescription>
<ActionDescription>
    <p>The form enables the validation with data annotation attributes by clicking on the submit externally. All rules are validated by the DataAnnotationsValidator.</p>
    <p>The above game field is configured with the following rule.</p>
    <table style='width:100%'>
        <tr>
            <th>Field</th>
            <th>Rule</th>
        </tr>
        <tr>
            <td>Required</td>
            <td>The field must have a valid value.</td>
        </tr>
    </table>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="control_wrapper">
        @if (string.IsNullOrEmpty(Message))
        {
        <EditForm Model="@model" OnValidSubmit="@OnValidSubmit" OnInvalidSubmit="@OnInvalidSubmit">
            <DataAnnotationsValidator />
            <div>
                <SfAutoComplete Placeholder="Select a Game" @bind-Value="@model.Text" DataSource="@Games">
                    <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings>
                </SfAutoComplete>
                <ValidationMessage For="()=>model.Text"></ValidationMessage>
            </div>
            <div class="sfButton">
                <SfButton type="submit" IsPrimary="true">Submit</SfButton>
            </div>
        </EditForm>
        }
        else
        {
            <div class="alert alert-success">
                @Message
            </div>
        }
    </div>
</div>

<style>
    .control_wrapper {
        width: 350px;
        margin: 0 auto;
        padding-top: 70px;
    }

    .sfButton {
        padding-top: 20px;
        display: flex;
        justify-content: center;
    }

    .validation-message {
        color: red;
        padding-top: 5px;
    }
</style>

@code {
    private string Message = string.Empty;
    async void OnValidSubmit()
    {
        Message = "Form Submitted Successfully!";
        await Task.Delay(2000);
        Message = string.Empty;
        model.Text = null;
        StateHasChanged();
    }
    private void OnInvalidSubmit()
    {
        Message = string.Empty;
    }
    private GameFields model = new GameFields();
    private List<GameFields> Games = new List<GameFields>()
    {
        new GameFields(){ ID= "Game1", Text= "American Football" },
        new GameFields(){ ID= "Game2", Text= "Badminton" },
        new GameFields(){ ID= "Game3", Text= "Basketball" },
        new GameFields(){ ID= "Game4", Text= "Cricket" },
        new GameFields(){ ID= "Game5", Text= "Football" },
        new GameFields(){ ID= "Game6", Text= "Golf" },
        new GameFields(){ ID= "Game7", Text= "Hockey" },
        new GameFields(){ ID= "Game8", Text= "Rugby"},
        new GameFields(){ ID= "Game9", Text= "Snooker" },
        new GameFields(){ ID= "Game10",Text= "Tennis"},
    };
    public class GameFields
    {
        public string ID { get; set; }
        [Required(ErrorMessage = "The Game field is required.")]
        public string Text { get; set; }
    }
}

